<template>
  <swiper :modules="modules" :slides-per-view="4" :space-between="20" class="h-48 mb-10">
    <swiper-slide class="pt-3" v-for="item in songList" :key="item.id">
      <!-- 图片 -->
      <div @click="goDetail(item.id)"
        class="z-50 rounded-md transition-all duration-200 relative top-0 flex h-5/6 hover:-top-3 group/bgHover">
        <img :src="item.picUrl" alt="" class="w-full h-full object-cover absolute rounded-md" />
        <!-- 音乐图标 -->
        <div class="relative top-2 left-2">
          <svg t="1728477067233" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="25441" width="24" height="24">
            <path
              d="M468.266667 128.085333a42.666667 42.666667 0 0 1-32.170667 51.029334 341.333333 341.333333 0 1 0 360.362667 144.170666 42.666667 42.666667 0 0 1 71.082666-47.232A424.874667 424.874667 0 0 1 938.666667 512c0 235.648-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512c0-203.093333 141.866667-372.992 331.904-416.085333a42.666667 42.666667 0 0 1 51.029334 32.170666zM554.666667 128.597333a43.093333 43.093333 0 0 1 51.797333-42.24l4.906667 1.322667 127.445333 42.496a42.666667 42.666667 0 0 1-22.186667 82.261333l-4.778666-1.28L640 187.178667V512a128 128 0 1 1-93.44-123.306667l8.106667 2.56V128.597333z"
              fill="#8a8a8a" p-id="25442"></path>
          </svg>
        </div>
        <!-- 播放按钮 -->
        <div
          class="absolute bottom-2 left-2 bg-green-400 w-8 rounded-md h-fit grid place-items-center invisible group-hover/bgHover:visible">
          <svg t="1727677590968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="4038" width="22" height="22">
            <path
              d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z"
              fill="#040000" p-id="4039"></path>
          </svg>
        </div>
        <!-- 播放量 -->
        <div class="absolute bottom-2 right-2 text-white visible group-hover/bgHover:invisible" v-if="item.playCount">
          {{ playCount(item.playCount) }}
        </div>
        <!-- 遮光罩 -->
        <div class="h-full w-full absolute top-0 bg-black opacity-0 group-hover/bgHover:opacity-50 rounded-md"></div>
      </div>
      <div class="h-1/6 truncate text-sm mt-3 px-1">{{ item.name }}</div>
    </swiper-slide>
  </swiper>
</template>

<script lang="ts" setup>
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules'
import { ref } from 'vue'
import { PersonalizedType } from '../../store/modules/songList/type'
import { playCount } from '../../hooks'
import { useRouter } from 'vue-router'

const router = useRouter()
const modules = ref([Navigation, Pagination, Scrollbar, A11y])
let { songList, title } = defineProps<{
  songList: PersonalizedType[]
  title: string
}>()
// 点击跳转到歌单详情页
const goDetail = (id: number) => {
  //点击歌单
  if (title == 'songList') {
    router.push({
      path: '/detail',
      query: {
        id,
        type: 'songList'
      }
    })
  } else if (title == 'djLIst') {
    router.push({
      path: '/detail',
      query: {
        id,
        type: 'djLIst'
      }
    })
  }
  else {
    router.push({
      path: '/detail',
      query: {
        id,
        type: 'album'
      }
    })
  }

}
</script>

<style scoped></style>
